// 路由的组件
import React, { Component } from 'react';
// 引入路由的组件
import {Switch, Route} from 'react-router-dom'
// 懒加载的组件start
import Loadable from 'react-loadable';
import Loading from './Loading';
// 懒加载的组件end

// 引入要显示的组件（页面）
const ComA = Loadable({
  loader: () => import('./ComA'),
  loading: Loading,
});
const FatherCom = Loadable({
  loader: () => import('./FatherCom'),
  loading: Loading,
});
const SonCom = Loadable({
  loader: () => import('./SonCom'),
  loading: Loading,
});
const Big = Loadable({
  loader: () => import('./Big'),
  loading: Loading,
});
const SongList = Loadable({
  loader: () => import('./SongList'),
  loading: Loading,
});
const SongDetail = Loadable({
  loader: () => import('./SongDetail'),
  loading: Loading,
});

class Router extends Component {
  render() {
    return (
      <div>
        <Switch>
          {/* exact 严格匹配 */}
          <Route path="/" component={ComA} exact></Route>
          <Route path="/FatherCom" component={FatherCom}></Route>
          <Route path="/SonCom" component={SonCom}></Route>
          <Route path="/Big" component={Big}></Route>
          <Route path="/SongList" component={SongList}></Route>
          <Route path="/SongDetail/:id" component={SongDetail}></Route>
        </Switch>
      </div>
    );
  }
}

export default Router;
